<template>
	<div class="videoPlay" v-cloak>
		
		<div class="introduce">
			<h3>UI设计的逻辑思维创作能力</h3>
			<p>为您找到突破点</p>
			<div style="text-align:center;">
				<span>难度: 高级</span>
				<span>时长: 30小时</span>
				<span>学习人数: 1111</span>
				<span>10分</span>
			</div>
			<div style="text-align:center; margin-top:30px;">
				<el-button type="danger" @click="$router.push('/homePage/confirmOrder')">立即购买 300￥</el-button>
				<el-button type="danger">加入购物车</el-button>
			</div>
		</div>

		<div class="comp-tab-t">
			<template>
			  <el-tabs v-model="activeName" @tab-click="handleClick">
			    <el-tab-pane label="课程" name="first" >
			    <div v-if="show" style="background:#000;width:100%;height:100%;position:absolute;top:0;z-index: 100000">
			    </div>
			    	<div class="info-video">
			    		<video
						    id="my-player"
						    class="video-js"
						    :controls="true"
						    preload="auto"
						    poster="//vjs.zencdn.net/v/oceans.png"
						    data-setup='{}'>
						  <source src="http://v3.mukewang.com/shizhan/595dcf75b3fee3220d8b46bb/H.mp4" type="video/mp4"></source>
						  <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/webm"></source>
						  <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg"></source>
						</video>
			 </div>
			    </el-tab-pane>
			    <el-tab-pane label="课程介绍" name="second">课程介绍</el-tab-pane>
			  </el-tabs>
			</template>
		</div>

	</div>
</template>

<script>
	import video from 'video.js'
	export default {
	    data() {
	      return {
	        activeName: 'first',
	        show: true,
	      };
	    },
	    methods: {
	      handleClick(tab, event) {
	        console.log(tab, event);
	      }
	    },
	    mounted(){
	    	let that = this;
	    	setTimeout(function(){
	    		that.show = false;
	    	},1000)
	    }
  };

	
</script>

<style lang="less">
	[v-cloak] {
	  display: none;
	}
	@import '../../../assets/css/video.css';
	.videoPlay{
		width: 1150px;
		margin: 80px auto 0 auto;
		.introduce{
			padding-top: 60px;
			height: 300px;
			div{
				padding-top: 20px;
				> span{
					margin-right: 20px;
					color: #666;

				}
			}
			h3{
				font-size: 40px;
				color: #666;
				text-align: center;
			}
			p{

				font-size: 26px;
				color: #666;
				text-align: center;
				margin-top: 15px;
			}
		}
		.el-tabs__header{
			margin: 30px 0px 30px ;
		}
		.el-tabs__item{
			font-size: 16px;
		}
	}
	.info-video{
		margin:0 auto;
		width:1150px;
		text-align: center;
		background: #000;
		padding:20px 0;
	}
    .video-js .vjs-big-play-button{
    	top:180px;
    	left: 50%;
    	margin-left: -1.5em;
    }
    .video-js{
    	left:95px;
    	.vjs-tech{
    		    position: absolute;
			    top: 0;
			    left: 0;
			    width: 100% !important;
    	}
    	.vjs-big-play-button{
			top:220px;
    	}
    }
    .my-player-dimensions {
	    width: 950px;
	    height: 500px;
	}

</style>
